<template>
  <div>
    <div id="container">
      <div id="minimap"></div>
      <div
        id="contextMenu"
        v-show="contextMenu.show"
        :style="{left:contextMenu.x,top:contextMenu.y}"
      >
        <ul @click="handlerContextMenuClick">
          <li>删除</li>
          <li>rqaw</li>
          <li>rqaw</li>
          <li>rqaw</li>
        </ul>
      </div>
    </div>

    <button @click="addNode"> add</button>

  </div>
</template>

<script>
import G6Editor from './G6'
import './G6/nodes_registed'
import './G6/edges_registed'

export default {
  data() {
    return {
      contextMenu: {
        x: 0,
        y: 0,
        show: false
      },
      editor: null,
      graph: null,
      data: {
        nodes: [
          {
            id: 'node1', // String，该节点存在则必须，节点的唯一标识
            x: 100, // Number，可选，节点位置的 x 值
            y: 200, // Number，可选，节点位置的 y 值
            type: 'card1',
            label: 'node1',
            size: [65, 65]
          },
          {
            id: 'node9', // String，该节点存在则必须，节点的唯一标识
            x: 500, // Number，可选，节点位置的 x 值
            y: 200, // Number，可选，节点位置的 y 值
            type: 'card1',
            label: 'node1',
            size: [65, 65]
          },
          {
            id: 'node2',
            x: 500,
            y: 200,
            size: [65, 65],
            type: 'card2',
            label: 'node2'
          },
          {
            id: 'node3',
            size: [65, 65],
            type: 'card2',
            label: 'node2'
          },
          {
            id: 'node4',
            size: [65, 65],
            type: 'card2',
            label: 'node2'
          },
          {
            id: 'node5',
            size: [65, 65],
            type: 'card2',
            label: 'node2'
          }
        ],
        // 边集
        edges: [
          {
            source: 'node1',
            target: 'node3',
            type: 'hvh'
          },
          {
            source: 'node1',
            target: 'node4',
            type: 'hvh'
          },
          {
            source: 'node2',
            target: 'node4',
            type: 'hvh'
          },
          {
            source: 'node2',
            target: 'node5'
          },
          {
            source: 'node3',
            target: 'node5'
          }
        ]
      },
      currentEvent: null
    }
  },
  mounted() {
    this.editor = new G6Editor({
      container: 'container',
      width: 1800,
      height: 800,
      model: 'edit',
      layout: {
        ordering: 'degree',
        type: 'circular'
      },
      modes: {
        default: [
          'drag-canvas',
          'zoom-canvas',
          'drag-node',
          'click-select',
          'brush-select'
        ]
      }
    })
    this.editor.init(this.data)
    this.graph = this.editor.getGraph()
    this.initnodeState()
    this.initEdgeState()
  },
  methods: {
    addNode() {
      var model = {
        id: 'node' + this.editor.getGraph().getNodes().length,
        x: parseInt(Math.random() * 1800),
        y: parseInt(Math.random() * 800),
        size: [65, 65],
        type: 'card2',
        label: 'node' + this.editor.getGraph().getNodes().length
      }
      this.editor.add('node', model)
    },
    removeNode() {
      this.currentEvent && this.editor.remove(this.currentEvent.item._cfg.id)
    },
    initnodeState() {
      let that = this
      this.graph.on('node:contextmenu', ev => {
        that.currentEvent = ev
        ev.preventDefault()
        ev.stopPropagation()
        that.contextMenu.x = `${ev.originalEvent.x}px`
        that.contextMenu.y = `${ev.originalEvent.y}px`
        that.contextMenu.show = true
      })
      this.graph.on('node:mouseleave', ev => {
        that.currentEvent = null
        that.contextMenu.show = false
      })
    },
    initEdgeState() {
      let that = this
      this.graph.on('edge:click', ev => {
        that.currentEvent = ev
        const edge = ev.item
        that.graph.setItemState(edge, 'selected', !edge.hasState('selected')) // 切换选中
      })
      this.graph.on('edge:mouseenter', ev => {
        that.currentEvent = ev
        const edge = ev.item
        that.graph.setItemState(edge, 'active', true)
      })
      this.graph.on('edge:mouseleave', ev => {
        that.currentEvent = null
        const edge = ev.item
        that.graph.setItemState(edge, 'active', false)
      })
    },
    handlerContextMenuClick(ev) {
      switch (ev.target.innerText) {
        case '删除':
          this.removeNode()
          break

        default:
          break
      }
      this.contextMenu.show = false
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
#container {
  border: 1px solid #ccc;
  position: relative;
}
#minimap {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid #ccc;
}
#contextMenu {
  position: absolute;
}
#contextMenu ul {
  border: 1px solid #ccc;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
}
#contextMenu li {
  height: 30px;
  width: 80px;
  line-height: 30px;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
#contextMenu li:hover {
  background: rgba(0, 0, 0, 0.3);
}
</style>
